﻿@namespace Skclusive.Markdown.Component
@inherits StyleComponentBase

h1.MarkdownTitle-Root {
    margin: 16px 0;
    font-size: 40px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.167;
    letter-spacing: 0em;
}

h2.MarkdownTitle-Root {
    margin: 40px 0 16px;
    font-size: 30px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.235;
    letter-spacing: 0.00735em;
}

h3.MarkdownTitle-Root {
    margin: 40px 0 16px;
    font-size: 1.5rem;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.334;
    letter-spacing: 0em;
}

h4.MarkdownTitle-Root {
    margin: 32px 0 16px;
    font-size: 1.25rem;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.0075em;
}

h5.MarkdownTitle-Root {
    margin: 32px 0 16px;
    font-size: 0.875rem;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 500;
    line-height: 1.57;
    letter-spacing: 0.00714em;
}

h1.MarkdownTitle-Root .MarkdownTitle-Anchor-Link,
h2.MarkdownTitle-Root .MarkdownTitle-Anchor-Link,
h3.MarkdownTitle-Root .MarkdownTitle-Anchor-Link,
h4.MarkdownTitle-Root .MarkdownTitle-Anchor-Link {
    display: none;
}

h1.MarkdownTitle-Root:hover .MarkdownTitle-Anchor-Link,
h2.MarkdownTitle-Root:hover .MarkdownTitle-Anchor-Link,
h3.MarkdownTitle-Root:hover .MarkdownTitle-Anchor-Link,
h4.MarkdownTitle-Root:hover .MarkdownTitle-Anchor-Link {
    color: rgba(255, 255, 255, 0.7);
    display: inline-block;
    padding: 0 8px;
}

h1.MarkdownTitle-Root:hover .MarkdownTitle-Anchor-Link:hover,
h2.MarkdownTitle-Root:hover .MarkdownTitle-Anchor-Link:hover,
h3.MarkdownTitle-Root:hover .MarkdownTitle-Anchor-Link:hover,
h4.MarkdownTitle-Root:hover .MarkdownTitle-Anchor-Link:hover {
    @* color: #fff; *@
}